<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="电影名" prop="chName">
        <el-input v-model="dataForm.chName" placeholder="电影名"></el-input>
      </el-form-item>
      <el-form-item label="制片地区" prop="country">
        <el-input v-model="dataForm.country" placeholder="制片地区"></el-input>
      </el-form-item>
      <el-form-item label="电影详情" prop="detail">
        <el-input v-model="dataForm.detail" placeholder="电影详情"></el-input>
      </el-form-item>
      <el-form-item label="导演id" prop="directorId">
        <el-button type="primary" @click="slotAppend('dir')">选择</el-button>
        <el-table :data="dataForm.directorList">
          <el-table-column
            property="name"
            label="导演"
            width="150"
          ></el-table-column>
        </el-table>
      </el-form-item>
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="directorVisible"
        append-to-body
        @close="close"
      >
        <el-table
          ref="multipleTable"
          :data="alldirector"
          @selection-change="selectionChangeHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            property="name"
            label="中文名"
            width="150"
          ></el-table-column>
        </el-table>
        <el-button type="primary" @click="modfiyMovies">确定</el-button>
      </el-dialog>
      <el-form-item label="主演" prop="star">
        <el-button type="primary" @click="slotAppend('star')">选择</el-button>
        <el-table :data="dataForm.starList">
          <el-table-column
            property="name"
            label="演员"
            width="150"
          ></el-table-column>
        </el-table>
      </el-form-item>
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="starVisible"
        append-to-body
        @close="close"

      >
        <el-table
          ref="multipleTable"
          :data="allstar"
          @selection-change="selectionChangeStarHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            property="name"
            label="中文名"
            width="150"
          ></el-table-column>
        </el-table>
        <el-button type="primary" @click="modfiyStar">确定</el-button>
      </el-dialog>
     
      <el-form-item label="时长" prop="duration">
        <el-input v-model="dataForm.duration" placeholder="时长"></el-input>
      </el-form-item>
      <el-form-item label="英文名" prop="enName">
        <el-input v-model="dataForm.enName" placeholder="英文名"></el-input>
      </el-form-item>
      <el-form-item label="电影海报" prop="pictureId">
        <el-upload
          class="avatar-uploader"
          :action="getUploadUrl"
          :show-file-list="false"
          :with-credentials="true"
          :headers="header"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          field="file"
        >
          <img
            v-if="dataForm.pictureId"
            :src="dataForm.pictureId"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
   
      </el-form-item>

      <el-form-item label="时间" prop="releaseDate">
          <el-date-picker
      v-model="value1"
      @change="dateChange"
      type="daterange"
      value-format="yyyy-MM-dd HH:mm:ss"
      :default-value="value1==''?null:value1"
      range-separator="至"
      start-placeholder="上映时间"
      end-placeholder="结束时间">
    </el-date-picker>
      </el-form-item> 
      
      <el-form-item label="类型" prop="version">
        <el-input v-model="dataForm.version" placeholder="类型"></el-input>
      </el-form-item>
      <el-form-item label="电影类型" prop="type">
        <el-button type="primary" @click="slotAppend('type')">选择</el-button>
        <el-table :data="dataForm.typeList">
          <el-table-column
            property="name"
            label="类型"
            width="150"
          ></el-table-column>
        </el-table>
      </el-form-item>
      <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="typeVisible"
        append-to-body
        @close="close"

      >
        <el-table
          ref="multipleTable"
          :data="alltype"
          @selection-change="selectionChangeTypeHandle"
        >
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            property="name"
            label="类型"
            width="150"
          ></el-table-column>
        </el-table>
        <el-button type="primary" @click="modfiyType">确定</el-button>
      </el-dialog>
    
      <el-form-item label="状态" prop="status">
  <el-select v-model="dataForm.status" placeholder="请选择">
   <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
   </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      options:[{
          value: 1,
          label: '想看'
        }, {
          value: 2,
          label: '预售'
        }, {
          value: 3,
          label: '购票'
        }, {
          value: 4,
          label: '结束'
        }],
      header:{},
      value1: "",

      dirListSelections: [],
      starListSelections: [],
      typeListSelections: [],
      alltype: [],
      allstar: [],
      alldirector: [],
      directorVisible: false,
      starVisible: false,
      typeVisible: false,


      visible: false,
      dataForm: {
        id: 0,
        chName: "",
        country: "",
        detail: "",
        directorId: "",
        star: "",
        grade: "",
        gradeCount: "",
        duration: "",
        enName: "",
        pictureId: "",
        wish: "",
        version: "",
        type: "",
        releaseDate:"",
        endDate: "",
        status: "",
        starList: [],
        typeList: [],
        directorList: [],
      },
      dataRule: {
        chName: [
          { required: true, message: "电影名不能为空", trigger: "blur" },
        ],
        country: [
          { required: true, message: "制片地区不能为空", trigger: "blur" },
        ],
        detail: [
          { required: true, message: "电影详情不能为空", trigger: "blur" },
        ],
        directorId: [
          { required: true, message: "导演id不能为空", trigger: "blur" },
        ],
        star: [{ required: true, message: "主演不能为空", trigger: "blur" }],
        duration: [
          { required: true, message: "时长不能为空", trigger: "blur" },
        ],
        enName: [
          { required: true, message: "英文名不能为空", trigger: "blur" },
        ],
        pictureId: [
          { required: true, message: "电影海报不能为空", trigger: "blur" },
        ],
        releaseDate: [
          { required: true, message: "上映时间不能为空", trigger: "blur" },
        ],
        version: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        type: [
          {
            required: true,
            message: "电影类型，使用,隔开不能为空",
            trigger: "blur",
          },
        ],
        endDate: [
          { required: true, message: "结束时间不能为空", trigger: "blur" },
        ],
        status: [{ required: true, message: "上架状态", trigger: "blur" }],
      },
    };
  },
  methods: {
     handleAvatarSuccess(res, file) {
      console.log(res);
      this.dataForm.pictureId = res.imageUrl;
    },
    beforeAvatarUpload(file) {
      var ca = document.cookie.split(";");
      console.log(ca[0].split("="));
      this.header.token = ca[0].split("=")[1];

      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      console.log(isJPG && isLt2M);
      return isJPG && isLt2M;
    },

    dateChange(data){
      console.log(data)
      this.dataForm.endDate=this.value1[1];
      this.dataForm.releaseDate=this.value1[0];
      console.log( this.dataForm.endDate,this.dataForm.releaseDate)
    },
    close(){
          this.$refs.multipleTable.clearSelection()
    },
    selectionChangeTypeHandle(val) {
      this.typeListSelections = val;
    },
    selectionChangeStarHandle(val) {
      this.starListSelections = val;
     
    },
    selectionChangeHandle(val) {
      this.dirListSelections = val;
    },
    slotAppend(key) {
      if(key==='dir'){
 this.directorVisible = true;
       this.toggleSelection1();

      }else if(key==='star'){
this.starVisible=true;
      this.toggleSelection2();

      }else{
this.typeVisible=true;
      this.toggleSelection3();

      }
     
    },
    // 选择有的导演
    toggleSelection1() {
      if (this.dataForm.directorList && this.alldirector) {
        this.$nextTick(() => {
          this.dataForm.directorList.forEach((row) => {
            this.alldirector.forEach((r) => {
              if (r.id === row.id) {
                this.$refs.multipleTable.toggleRowSelection(r, true);
              }
            });
          });
        });
      }
    },
    // 选择有的演员
    toggleSelection2() {
      if (this.dataForm.starList && this.allstar) {
        this.$nextTick(() => {
          this.dataForm.starList.forEach((row) => {
            this.allstar.forEach((r) => {
              if (r.id === row.id) {
                this.$refs.multipleTable.toggleRowSelection(r, true);
              }
            });
          });
        });
      }
    },
    // 选择有的类型
    toggleSelection3() {
      if (this.dataForm.typeList && this.alltype) {
        this.$nextTick(() => {
          this.dataForm.typeList.forEach((row) => {
            this.alltype.forEach((r) => {
              if (r.id === row.id) {
                this.$refs.multipleTable.toggleRowSelection(r, true);
              }
            });
          });
        });
      }
    },
    modfiyMovies() {
      this.directorVisible = false;
      this.dataForm.directorList = this.dirListSelections;
       this.dataForm.directorId = "";
      if (this.dirListSelections) {
        this.dirListSelections.forEach((row) => {
          this.dataForm.directorId += row.id + ",";
        });

        this.dataForm.directorId = this.dataForm.directorId.substring(
          0,
          this.dataForm.directorId.length - 1
        );
      }
      console.log(this.dataForm.directorId);
    },
     modfiyStar (){
      this.starVisible = false;

      this.dataForm.starList = this.starListSelections;
       this.dataForm.star = "";
      if (this.starListSelections) {
        this.starListSelections.forEach((row) => {
          this.dataForm.star += row.id + ",";
        });
        this.dataForm.star = this.dataForm.star.substring(
          0,
          this.dataForm.star.length - 1
        );
      }
      console.log(this.dataForm.star);
    },
    modfiyType (){
      this.typeVisible = false;

      this.dataForm.typeList = this.typeListSelections;
         this.dataForm.type = "";
      if (this.typeListSelections) {
        this.typeListSelections.forEach((row) => {
          this.dataForm.type += row.id + ",";
        });
        this.dataForm.type = this.dataForm.type.substring(
          0,
          this.dataForm.type.length - 1
        );
      }
      console.log(this.dataForm.type);
    },
    init(id) {
       this.value1=""
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        //所有导演
        this.$http({
          url: this.$http.adornUrl(`/cb/star/list/dir`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          console.log("导演", data);
          this.alldirector = data.list;
        });
        //所有演员
        this.$http({
          url: this.$http.adornUrl(`/cb/star/list/star`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          this.allstar = data.list;
        });
        //所有类型
        this.$http({
          url: this.$http.adornUrl(`/cb/movietype/list`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          this.alltype = data.page.list;
        });

        //信息
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/cb/movie/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
                   this.value1=[]
              console.log(data);
              this.dataForm.chName = data.movie.chName;
              this.dataForm.country = data.movie.country;
              this.dataForm.detail = data.movie.detail;
              this.dataForm.directorId = data.movie.directorId;
              this.dataForm.star = data.movie.star;
              this.dataForm.duration = data.movie.duration;
              this.dataForm.enName = data.movie.enName;
              this.dataForm.pictureId = data.movie.pictureId;
              this.dataForm.version = data.movie.version;
              this.dataForm.type = data.movie.type;
              this.dataForm.status = data.movie.status;
              this.dataForm.releaseDate=data.movie.releaseDate;
              this.dataForm.endDate=data.movie.endDate;
              if(this.dataForm.releaseDate){
                this.value1.push(this.dataForm.releaseDate)
              }
              if(this.dataForm.endDate){
                              this.value1.push(this.dataForm.endDate)            

              }
              this.dataForm.directorList=data.movie.directorList;
              this.dataForm.starList=data.movie.starList;
              this.dataForm.typeList=data.movie.typeList;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/cb/movie/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              chName: this.dataForm.chName,
              country: this.dataForm.country,
              detail: this.dataForm.detail,
              directorId: this.dataForm.directorId,
              star: this.dataForm.star,
              duration: this.dataForm.duration,
              enName: this.dataForm.enName,
              pictureId: this.dataForm.pictureId,
              version: this.dataForm.version,
              type: this.dataForm.type,
             releaseDate: this.dataForm.releaseDate,
              endDate: this.dataForm.endDate,
              status: this.dataForm.status,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  }, 
   computed: {
    getUploadUrl() {
      return window.SITE_CONFIG.baseUrl + "/cb/file/upload";
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>